<template>
	<view>
		<view class="file-message" @click="openDoc">
			<view class="file-logo">
				<image :src="`/static/fileType_big/${setFileIcon(detail.name)}_b.png`" mode="widthFix" style="width: 50rpx;"></image>
			</view>
			<view class="file-name">
				<view>{{ truncateMiddle(detail.name) }}</view>
				<text>{{ detail.formatSize }}</text>
			</view>
		</view>

		<view class="progress" v-show="(message.percentage && +message.percentage < 100) || message.success == 'loading'">
			<view style="width: 98%;">
				<up-line-progress :percentage="message.percentage" height="8px" activeColor="#56A8E6"></up-line-progress>
			</view>
		</view>
	</view>
</template>

<script>
import { chatApi } from '@/apis/cloud/chat'
import { fileTypeFormat } from '@/utils/chat.js'
	
export default {
  name: 'FileItem',
  props: {
		message: {
			type: Object,
			required: true
		},
		detail: {
			type: Object,
			required: true
		},
		workerId: {
			type: Number
		}
  },
  data() {
		return {
			nextCloud: {}
		}
	},
	mounted() {
		this.nextCloud = uni.getStorageSync('next_cloud');
	},
	methods: {
		// 文件图标处理
		setFileIcon (fileName) {
			const str = fileName.split('.');
			if(str.length == 1) {
				return 'folder'
			}else {
				return fileTypeFormat(str[str.length - 1])
			}
		},
		truncateMiddle (text, maxLength = 20) {
			if (text.length <= maxLength) return text;
			const half = Math.floor(maxLength / 2);
			return `${text.slice(0, half)}...${text.slice(-half)}`;
		},
		openDoc() {
			const message = this.message;
			const detail = this.detail;
			const worker_id = this.workerId;
			
			if(message.percentage && message.percentage < 100) {
				return
			}
			const type = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf'];
			const str = detail.name.split('.');
			const icon = str[str.length - 1];
			const that = this;
			let url = ''
			const xtoken = this.nextCloud.xtoken
		
		  const fileName = encodeURIComponent(encodeURIComponent(detail.name)); // 双重编码
		  const fileurl = encodeURIComponent(detail.url); // 单次编码
		
		  if (type.includes(icon)) {
		    let previewUrl = '';
		    if (xtoken) {
		      previewUrl = `https://cloud.mfarmers.com/dist/previewDoc1.html?xtoken=${xtoken}&nc_id=${detail.nc_id ? detail.nc_id : ''}&fileName=${fileName}&type=mobile&user=${worker_id}&url=${fileurl}`;
		    } else {
		      previewUrl = `https://cloud.mfarmers.com/dist/previewDoc1.html?fileName=${fileName}&type=mobile&user=${worker_id}&url=${fileurl}`;
		    }
		
		    const encodedData = encodeURIComponent(JSON.stringify({ previewUrl }));
		    url = `/pages/chat/message/common/previewDoc?data=${encodedData}`;
		  } else {
		    url = `/pages/chat/message/common/downloadDoc?fileName=${fileName}&fileSize=${detail.formatSize}&url=${fileurl}&fid=${detail.fid}&type=${detail.type}`;
		  }
		
		  uni.navigateTo({ url });
		}
  }
};
</script>

<style lang="scss" scoped>
	@import "../../config/global.scss";
.file-message {
	display: flex;
	line-height: 32rpx;
	width: 55vw;

	.file-name {
		margin-left: 20rpx;
		font-weight: 500;
		font-size: 28rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;

		text {
			font-size: 24rpx;
			color: #A4A6A8;
			font-weight: 400;
		}
	}
}
.progress {
	margin-top: 8px;
	padding: 4px 0 4px 2px;
	display: flex;
	align-items: center;

	.upCancel {
		margin-left: 12px;
	}
}
</style>
